<template>
    <div class="el-collapse-item"
         :class="{'is-active': isActive, 'is-disabled': disabled }">
        <div
                role="tab"
                :aria-expanded="isActive"
                :aria-controls="`el-collapse-content-${id}`"
                :aria-describedby="`el-collapse-content-${id}`"
        >
            <div
                    class="el-collapse-item__header"
                    @click="handleHeaderClick"
                    role="button"
                    :id="`el-collapse-head-${id}`"
                    :tabindex="disabled ? undefined : 0"
                    @keyup.space.enter.stop="handleEnterClick"
                    :class="{
          'focusing': focusing,
          'is-active': isActive
        }"
                    @focus="handleFocus"
                    @blur="focusing = false"
            >
                <slot name="title">{{title}}</slot>
                <i
                        class="el-collapse-item__arrow el-icon-arrow-right"
                        :class="{'is-active': isActive}">
                </i>
            </div>
        </div>
        <el-collapse-transition>
            <div
                    class="el-collapse-item__wrap"
                    v-show="isActive"
                    role="tabpanel"
                    :aria-hidden="!isActive"
                    :aria-labelledby="`el-collapse-head-${id}`"
                    :id="`el-collapse-content-${id}`"
            >
                <div class="el-collapse-item__content">
                    <slot></slot>
                </div>
            </div>
        </el-collapse-transition>
    </div>
</template>
<script>
    import ElCollapseTransition from 'element-ui/src/transitions/collapse-transition';
    import Emitter from 'element-ui/src/mixins/emitter';
    import {generateId} from 'element-ui/src/utils/util';

    export default {
        name: 'ElCollapseItem',

        componentName: 'ElCollapseItem',

        mixins: [Emitter],

        components: {ElCollapseTransition},

        data() {
            return {
                contentWrapStyle: {
                    height: 'auto',
                    display: 'block'
                },
                contentHeight: 0,
                focusing: false,
                isClick: false,
                id: generateId()
            };
        },

        inject: ['collapse'],

        props: {
            title: String,
            name: {
                type: [String, Number],
                default() {
                    return this._uid;
                }
            },
            disabled: Boolean
        },

        computed: {
            isActive() {
                return this.collapse.activeNames.indexOf(this.name) > -1;
            }
        },

        methods: {
            handleFocus() {
                setTimeout(() => {
                    if (!this.isClick) {
                        this.focusing = true;
                    } else {
                        this.isClick = false;
                    }
                }, 50);
            },
            handleHeaderClick() {
                if (this.disabled) return;
                this.dispatch('ElCollapse', 'item-click', this);
                this.focusing = false;
                this.isClick = true;
            },
            handleEnterClick() {
                this.dispatch('ElCollapse', 'item-click', this);
            }
        }
    };
</script>
